<template>
    <div class="up-container">
        <div class="header">
            <router-link to="/"><LeftOutlined/>&nbsp;返回</router-link>
        </div>

        <div class="upload">
            <Upload @upload="fileUploadedWithPath"></Upload>
        </div>

        <div class="form" v-show="!visible">
            <div class="input-item">
                <Input name="昵称（可选）" type="text" v-model="userInfo.nickname" />
            </div>
            <div class="input-item">
                <Input name="邮箱（可选）" type="email" v-model="userInfo.email" />
            </div>
        </div>
        <div class="form" v-show="visible">
            <div class="input-item">
                <Input name="用户名" type="text" v-model="userInfo.username" />
            </div>
            <div class="input-item">
                <Input name="密码" type="password" v-model="userInfo.password" />
            </div>
        </div>
        <div class="input-item" v-show="!visible">
            <StepButton @visible="changeVisible" />
        </div>
        <div class="input-item" v-show="visible">
            <Button @submit-request="handleRegisterRequest"></Button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import Upload from '../../../components/Upload.vue';
import Input from '../../../components/Input.vue';
import Button from '../../../components/Button.vue';
import { LeftOutlined } from '@ant-design/icons-vue';
import StepButton from '../../../components/StepButton.vue';
import { Register_API } from '../../../api/user.js';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router'

const router = useRouter();
const visible = ref(false);

const userInfo = reactive({
    nickname: '',
    username: '',
    password: '',
    email: '',
    avatar: ''
});

const changeVisible = () => {
    visible.value = !visible.value;
};

const fileUploadedWithPath = (filePath) => {
    if (filePath) {
        userInfo.avatar = filePath;
    } 
};

const handleRegisterRequest = async () => {
    const { data: res } = await Register_API(userInfo);

    if (res.code == 200) {
        message.success(res.message);
        router.push('/in')
    } else {
        message.error(res.message);
    }
};
</script>

<style lang="less" scoped>
.up-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #212121;

    .header {
        width: 100%;
        height: 55px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: 0;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 12px;
        a {
            padding-top: 8px;
            color: #727475;
            text-decoration: none;
        }
    }

    .upload {
        display: block;
    }

    .form {
        width: 100vw;
        height: auto;
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .input-item {
            display: block;
            margin: 16px;
        }

        .other-item {
            font-size: 12px;
            color: #727475;
            display: flex;
            align-items: center;

            a {
                font-size: 12px;
                color: #727475;
            }

            a:hover {
                color: #91BBED;
                cursor: pointer;
                border-bottom: 0.6px dashed #727475;
            }
        }
    }
}
</style>